<template>
	<view class="container">
		<!-- 商品列表 -->
		<view class="shop-list-nav" v-if="contentType==2||contentType==3">
			<view class="nav-item-sort" @click="VipTap(2)">
				<text class="nav-title" :class="{'active' : contentType == 2}">一折区</text>
			</view>
			<view class="nav-item-sort" @click="VipTap(3)">
				<text class="nav-title" :class="{'active' : contentType == 3}">二折区</text>
			</view>
		</view>
		<view class="flex-items-plus flex-row search">
			<view class="searchBg">
				<view class="searchImg-box flex-items-plus">
					<image class="searchImg" src="https://ceres.zkthink.com/static/img/searchImg.png"></image>
					<input class="search-box" v-model="keyWord" placeholder-class="searchboxPlace"
						placeholder="请输入您想要的宝贝" />
				</view>
				<label class="mar-left-40 fs28" @click="searchList(1)">搜索</label>
			</view>
		</view>
		<view class="shop-list-nav">
			<view class="nav-item-sort" @click="sortTap(1)">
				<text class="nav-title" :class="{'active' : sortIndex == 1}">默认</text>
			</view>
			<view class="nav-item-sort" @click="sortTap(2)">
				<text class="nav-title" :class="{'active' : sortIndex == 2}">价格</text>
				<view class="r">
					<view class="arrowUp" :class="{activeUp: type == 1}"></view>
					<view class="arrowDown" :class="{activeDown: type == 2}"></view>
				</view>
			</view>
			<view class="nav-item-sort" @click="sortTap(3)">
				<text class="nav-title" :class="{'active' : sortIndex == 3}">销量</text>
				<view class="r">
					<view class="arrowUp" :class="{activeUp: volume == 1}"></view>
					<view class="arrowDown" :class="{activeDown: volume == 2}"></view>
				</view>
			</view>
			<view class="nav-item-sort" @click="sortTap(4)">
				<text class="nav-title">筛选</text>
			</view>
		</view>
		<view class="vipTabs"></view>
		<view class="listBox">
			<view v-for="(item, index) in list" :key="index" class="goodsDetails-box flex-display flex-column"
				@click="goodsDateils(item.shopId,item.productId,item.skuId)">
				<view class="spikeList goodsDetails">
					<view class="listItem">
						<view class="itemBox">
							<img :src="item.image" class="pic-img default-img">
						</view>
						<view class="itemInfo">
							<p>{{item.productName}}</p>
							<view class="itemInfotab">
								<view v-for="(yitem,index) in item.style" :key="index" v-if="index<3">{{yitem}}</view>
							</view>
<!-- 							<view class="number" v-if="item.users != null">
								<view class="numText">{{item.users}}人付款</view>
							</view> -->
							<div class="priceWrap">
								<div class="price">
									¥ {{item.price}}
								</div>
								<div class="priceWrapIconList">
									<div class="priceWrapIconListItem" v-if="item.jdDiscount">
										<image src="https://cereshop-mall.oss-cn-qingdao.aliyuncs.com/resources/icon_jd.jpg"></image>
										<div>{{item.jdDiscount}}折</div>
									</div>
									<div class="priceWrapIconListItem" v-if="item.tmDiscount">
										<image src="https://cereshop-mall.oss-cn-qingdao.aliyuncs.com/resources/icon_tm.jpg"></image>
										<div>{{item.tmDiscount}}折</div>
									</div>
									<div class="priceWrapIconListItem" v-if="item.vipDiscount">
										<image src="https://cereshop-mall.oss-cn-qingdao.aliyuncs.com/resources/icon_wph.png"></image>
							
										<div>{{item.vipDiscount}}折</div>
									</div>
								</div>
							</div>
							<view class="vipInfoBttom">
								<!-- <view>400+评价</view> -->
								<view>{{item.users?item.users: 0}}付款</view>
							</view>
							<div class="stock">
								库存：{{item.stockNumber}}
							</div>
<!-- 							<view class="flex-display flex-sp-between flex-row mar-top-20 flex-items shopName">
								<label class="fs22 font-color-FFEBC4">{{item.shopName}}</label>
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 搜索为空 -->
		<view v-if="ifEmpty" class="emptyCart-box flex-items-plus flex-column">
			<image class="emptyCart-img" src="https://ceres.zkthink.com/static/images/searchEmpty.png"></image>
			<label class="font-color-999 fs26 mar-top-30">搜索不到你要找的宝贝呢</label>
		</view>

		<view class="reachBottom" v-if="noMoreData && !ifEmpty">
			<image class="reach-icon" src="https://ceres.zkthink.com/static/img/reachBottom.png" mode="widthFix">
			</image>
			<text class="reach-text">这里到底了哦~~</text>
		</view>
		<uni-drawer ref="showRight" :maskClick="true" :width="300" mode="right" :mask-click="false">
			<scroll-view style="height: 100%;" scroll-y="true">
				<view style="position: relative;padding-bottom: 122upx;">
					<view class="drawerBox" v-for="(item,index) in categoryList" :key="index">
						<view class="drawerBoxTitle">{{item.dictName}}</view>
						<view class="drawerBoxList">
							<view v-for="(item1,index1) in item.children" :key="index1" :class="item1.band?'c drawerBoxListItem':'drawerBoxListItem'" @click="changeList(index,index1,item1)">{{item1.dictName}}</view>
						</view>
					</view>
					<view class="drawerBottom">
						<view class="drawerBottomL">重置</view>
						<view class="drawerBottomR" @click="drawerDete">确定</view>
					</view>
				</view>
			</scroll-view>
		</uni-drawer>
	</view>
</template>

<script>
	const NET = require('../../utils/request')
	const API = require('../../config/api')
	export default {
		data() {
			return {
				keyWord: '',
				category3Id: '',
				page: 1,
				pageSize: 20,
				source: 2,
				list: [],
				loadingType: 0,
				sortIndex: 1,
				ifNew: 0, //是否新品
				type: 0, //价格排序条件
				volume: 0, //销量排序条件
				topLeft: 0,
				ifEmpty: false,
				noMoreData: false,
				total: 0,
				show: false,
				categoryList:[],//类目列表
				childrenIdList:[],//已选子集列表
				contentType:'',//类型
				jumpNav:false,
				navList:{
					'1':[1915],
					'2':[1916],
					'3':[1917,1918],
					'4':[1957],
					'5':[1915,1916,1917,1918]
				},
				band:'',
				tid:''
			}
		},
		onLoad(option) {
			if (option.keyWord) {
				this.keyWord = option.keyWord
			}
			if (option.category3Id) {
				this.category3Id = option.category3Id
			}
			if(option.contentType){
				this.contentType = option.contentType
			}
			if(option.tid){
				this.tid = option.tid
			}
			if(option.band){
				this.jumpNav = true
				this.band = option.band
			}
			if(option.name){
				uni.setNavigationBarTitle({
					title:option.name
				})
			}
			this.searchList(1)
			this.getServerData()
		},
		onReachBottom() {
			if (this.loadingType == 1) {
				uni.stopPullDownRefresh()
			} else {
				this.page = this.page + 1
				this.searchList(0)
			}
		},
		// onPageScroll(e) {
		// 	this.topLeft = e.scrollTop
		// },
		methods: {
			sortTap(index) {
				if(index!=4){
					this.loadingType = 0
					this.noMoreData = false
					this.total = 0
					this.page = 1
					this.list = []
				}
				// if(index == 1){
				//   this.type = 1
				//   this.volume = 1
				//   this.sortIndex = index
				// }else if(index == 2){
				//   this.type = this.type != 1 ? 1:2
				//   this.sortIndex = index
				// }else if(index == 3){
				//   this.volume = this.volume != 1 ? 1:2
				//   this.sortIndex = index
				// }
				console.log(index, 'index')
				if (index === 1) {
					this.type = 0
					this.volume = 0
				} else if (index === 2) {
					this.volume = 0
					if (this.type === 0) {
						this.type = 1
					} else {
						console.log(this.type, 'this.type1')
						this.type = this.type != 1 ? 1 : 2
					}
					console.log(this.type, 'this.type2')
				} else if (index === 3) {
					this.type = 0
					if (this.volume === 0) {
						this.volume = 1
					} else {
						this.volume = this.volume != 1 ? 1 : 2
					}
				} else if (index == 4) {
					
					this.$refs.showRight.open();
				}
				this.sortIndex = index
				if (index != 4) {
					this.searchList()
				}

			},
			VipTap(num){
				this.contentType = num
				this.searchList(1)
			},
			//获取类目
			getServerData() {
				let arr = []
				if(this.jumpNav){
					let a = this.navList[this.band]
					arr = a.join(',')
				}else{
					arr = ''
				}
				NET.request(API.category,{dictIds:arr}, 'GET').then(
					res => {
						console.log(res)
						if(res.code=='200'){
							for(let i = 0 ;i<res.data.length;i++){
								for(let j = 0;j<res.data[i].children.length;j++){
									res.data[i].children[j].band = false
								}
							}
							this.categoryList = res.data
						}
					}).catch(res => {
			
				})
			
			},
			drawerDete(){
				this.loadingType = 0
				this.noMoreData = false
				this.total = 0
				this.page = 1
				this.list = []
				this.volume = 0
				this.type = 0
				this.searchList(4)
				this.$refs.showRight.close();
			},
			changeList(index,index1,item){
				this.categoryList[index].children[index1].band = !this.categoryList[index].children[index1].band
				for(let i = 0;i<this.childrenIdList.length;i++){
					if(this.childrenIdList[i]==item.dictId){
						this.childrenIdList.splice(i,1)
						return
					}else{
						
					}
				}
				this.childrenIdList.push(item.dictId)
			},
			searchTextDel() {
				this.keyWord = ''
			},
			searchList(type) {
				uni.showLoading({
					mask: true,
					title: '加载中...',
				})
				let arr = []
				if (type == 1||type==4) {
					this.list = []
					this.page = 1
				}
				if(this.jumpNav){
					let a
					a = [...this.childrenIdList, ...this.navList[this.band]]
					arr = a.join(',')
				}else{
					if(this.childrenIdList.length>0){
						arr = this.childrenIdList.join(',')
					}
				}
				NET.request(API.getProducts, {
					dictIds: arr.length>0?arr:'',
					search:this.keyWord?this.keyWord:'',
					type: this.contentType,
					page: this.page,
					pageSize: this.pageSize,
					classifyId:this.tid
				}, 'GET').then(res => {
					uni.hideLoading()
					this.list = this.list.concat(res.data.list)
					this.total = res.data.total
					this.ifEmpty = this.list.length === 0
					if (this.total === this.list.length) {
						this.noMoreData = true
						this.loadingType = 1
					}
				}).catch(res => {
					uni.hideLoading()
				})
				// if (this.category3Id) {
				// 	NET.request(API.GetClaasifyProducts, {
				// 		classifyId: this.category3Id,
				// 		type: this.type,
				// 		volume: this.volume,
				// 		productName: this.keyWord,
				// 		page: this.page,
				// 		pageSize: this.pageSize
				// 	}, 'GET').then(res => {
				// 		uni.hideLoading()
				// 		this.list = this.list.concat(res.data.list)
				// 		this.total = res.data.total
				// 		this.ifEmpty = this.list.length === 0
				// 		if (this.total === this.list.length) {
				// 			this.noMoreData = true
				// 			this.loadingType = 1
				// 		}
				// 	}).catch(res => {
				// 		uni.hideLoading()
				// 	})
				// } else {
				// 	NET.request(API.GgetSearchProducts, {
				// 		search: this.keyWord,
				// 		type: this.type,
				// 		volume: this.volume,
				// 		page: this.page,
				// 		pageSize: this.pageSize
				// 	}, 'GET').then(res => {
				// 		uni.hideLoading()
				// 		this.list = this.list.concat(res.data.list)
				// 		this.total = res.data.total
				// 		this.ifEmpty = this.list.length === 0
				// 		if (this.total === this.list.length) {
				// 			this.noMoreData = true
				// 			this.loadingType = 1
				// 		}
				// 	}).catch(res => {
				// 		uni.hideLoading()
				// 	})
				// }
			},
			//商品详情
			goodsDateils(shopId, productId, skuId) {
				uni.navigateTo({
					url: 'goodsDetails?shopId=' + shopId + '&productId=' + productId + '&skuId=' + skuId
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f8;
	}
	.drawerBottom{
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 122upx;
		border-top: 1px solid #DCDCDC;
		display: flex;
		background-color: #fff;
		align-items: center;
		justify-content: space-around;
		.drawerBottomL{
			background-color: #333334;
			color: #EFB257;
		}
		.drawerBottomR{
			background-color: #EFB257;
		}
		view{
			width: 244upx;
			height: 62upx;
			line-height: 62upx;
			text-align: center;
			color: #fff;
			border-radius: 94upx;
		}
	}
	.drawerBox{
		margin: 40upx 0 0 32upx;
		.drawerBoxTitle{
			font-size: 28upx;
			color: #333;
			margin-bottom: 24upx;
		}
		.drawerBoxList{
			display: flex;
			flex-wrap: wrap;
			font-size: 24upx;
			color: #333;
			.c{
				color: #EFB257;
				border-color: #EFB257;
			}
			.drawerBoxListItem{
				padding: 8upx 24upx;
				border-radius: 30upx;
				margin-right: 24upx;
				margin-bottom: 16upx;
				background-color: #F4F4F4;
			}
		}
	}
	// 触底样式
	.reachBottom {
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.reach-icon {
			width: 150rpx;
			height: 150rpx;
		}

		.reach-text {
			margin: 20rpx 0;
			color: #CCCCCC;
		}
	}

	input {
		padding-left: 100upx;
	}

	.container {
		height: 100%;
		background: #f8f8f8;

		.search {
			padding: 20rpx;
			// border-top: 2rpx solid #F3F4F5;
			position: relative;
			z-index: 2;
		}

		.searchImg-box {
			position: relative;
		}

		.emptyCart-box {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			margin: auto;

			.emptyCart-img {
				width: 113upx;
				height: 98upx;
			}
		}

		.searchBg {
			width: 690upx;
			display: flex;
			background-color: #fff;
			align-items: center;
			height: 60rpx;
			justify-content: space-between;
			margin: 0 auto;
			border-radius: 180upx;
			padding-right: 24upx;
			label {
				font-weight: 400;
				color: #333333;
				margin-left: 0 !important;
			}
		}

		.searchImg {
			width: 50upx;
			height: 50upx;
			position: absolute;
			left: 40upx;
		}

		.search-box {
			width: 400upx;
			height: 66upx;
		}

		.searchboxPlace {
			font-size: 26upx;
			color: #A9A9A9;
			padding-right: 30upx;
		}

		.searchClose-icon {
			z-index: 999;
			width: 40upx;
			height: 40upx;
			margin-left: -50upx;
		}

		.promotion618 {
			width: 130upx;
			height: 30upx;
		}

		.goodsDetails-box {
			background: #FFFFFF;
			margin-top: 20rpx;
			box-sizing: border-box;
			width: 332upx;
			border-radius: 16upx;
			.spikeList {
				border-bottom: 1upx solid #EDEDED;
				padding-top: 30rpx;
				padding-bottom: 30upx;
				position: relative;

				.listItem {
					border-bottom: 1upx solid #EEEEEE;
					// padding-left: 30rpx;

					.iconImg {
						width: 58rpx;
						height: 36rpx;
					}

					&:last-child {
						border-bottom: none;
					}

					.itemBox {
						width: 300upx;
						height: 302upx;
						margin: 0 auto;
						img {
							width: 100%;
							height: 100%;
							border-radius: 16upx;
						}
					}

					.itemInfo {
						width: 300upx;
						margin: 0 auto;
						margin-top: 24upx;
						.itemInfotab{
							width: 100%;
							margin-top: 6upx;
							display: flex;
							view{
								height: 32upx;
								font-size: 20upx;
								color: #999;
								background-color: #F4F4F4;
								padding: 0 16upx;
								border-radius: 30upx;
								margin-right: 8upx;
							}
						}
						.stock {
							color: #999999;
							font-size: 24upx;
							display: inline-block;
							margin: 8upx 0;
						}
						.vipInfoBttom {
							display: flex;
							justify-content: space-between;
							margin-top: 8upx;
							view {
								font-size: 20upx;
								color: #999999;
							}
						}
						.priceWrap {
							width: 100%;
							display: flex;
							justify-content: space-between;
							margin-top: 18upx;
							.price {
								font-size: 32upx;
								font-weight: bold;
								color: #EF1414;
							}
							.priceWrapIconList {
								display: flex;
								justify-content: space-between;
						
								.priceWrapIconListItem {
									width: 40upx;
						
									image {
										width: 30upx;
										height: 30upx;
										border-radius: 8upx;
										margin-bottom: 4upx;
										display: block;
										margin: 0 auto;
									}
						
									div {
										font-size: 16upx;
										color: #EF1414;
									}
								}
							}
						
						}
						p {
							width: 300upx;
							font-size: 26upx;
							color: #333333;
							line-height: 40upx;
							-webkit-box-orient: vertical;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap; // 默认不换行；
						}

						.number {
							color: #999999;
							font-size: 26upx;
							display: flex;
							align-items: center;

							.numText {
								padding: 0 10rpx;
								height: 40rpx;
								line-height: 40rpx;
								border: 2rpx solid #E4E5E6;
								color: #EFB257;
								font-size: 20rpx;
								margin-right: 10rpx;
							}
						}
					}
				}

				.shopName {
					position: absolute;
					left: 0;
					top: 0;
					height: 50rpx;
					background: #333333;
					opacity: 1;
					border-radius: 0 20rpx 20rpx 0;
					padding: 10rpx 15rpx;
				}
			}
		}

		.listBox {
			// padding: 0 24rpx;
			width: 690upx;
			margin: 0 auto;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.usersBox {
				margin-top: 20rpx;

				label {
					padding: 10rpx;
					border: 2rpx solid #E4E5E6;
				}
			}
		}
	}

	.shop-list-nav {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 80rpx;
		line-height: 76rpx;
		background: #fff;
	}

	.nav-item {
		flex: 1;
		font-size: 30rpx;
		color: #666;
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 80rpx;
		line-height: 76rpx;
	}

	.nav-title {}

	.nav-item.active {
		color: #EFB257;
	}

	.nav-item .line {
		display: inline-block;
		width: 80rpx;
		height: 4rpx;
		background: #fff;
		border-radius: 2rpx;
	}

	.nav-item.active .line {
		background: #EFB257;
	}

	.nav-item.padd-l {
		padding-left: 20%;
		box-sizing: border-box;
	}

	.active {
		color: #EFB257;
	}

	.nav-item.padd-r {
		padding-right: 20%;
		box-sizing: border-box;
	}

	.nav-item-sort {
		flex: 1;
		font-size: 24rpx;
		color: #222;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		line-height: 80rpx;
	}

	.nav-item-sort .r {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 5rpx;

		.arrowDown {
			width: 0;
			height: 0;
			border-width: 10rpx;
			border-style: solid;
			border-color: #CCCCCC transparent transparent transparent;
			margin-top: 2rpx;
		}

		.arrowUp {
			margin-bottom: 2rpx;
			width: 0;
			height: 0;
			border-width: 10rpx;
			border-style: solid;
			border-color: transparent transparent #CCCCCC transparent;
		}

		.activeDown {
			border-color: #EFB257 transparent transparent transparent;
		}

		.activeUp {
			border-color: transparent transparent #EFB257 transparent;
		}
	}

	//.nav-item-sort .r .arrow-img {
	//  width: 32rpx;
	//  height: 32rpx;
	//  padding: 7rpx;
	//  box-sizing: border-box;
	//}
	//// #ifdef MP-ALIPAY
	//.nav-item-sort .r .arrow-img {
	//  width: 16rpx;
	//  height: 16rpx;
	//  padding: 4rpx;
	//  box-sizing: border-box;
	//}
	.search {
		back
		padding-top: 20rpx;
	}

	// #endif
</style>
